<template>
  <view class="contract-list">
    <view class="contract-list-main">
      <list-page
        :config="page.config"
        :form="page.form"
        ref="listPage"
        :tips="['暂无合同信息']"
      >
        <template v-slot="{ listData }">
          <view
            class="contract-list-item"
            :key="index"
            v-for="(item, index) in listData"
            @tap="nav(`/pages/h5/index?codeUrl=${encodeURIComponent($_.get(item,'_raw.esignH5Url'))}`)"
          >
            <view class="item-title">
              <view class="i-sn"> <view></view>合同编号：{{ item._raw.sn }} </view>
              <view class="i-status">待签署</view>
            </view>
            <view class="contract-list-i-item">
              <text>合同类型</text>
              <text>合作项目系列合同书</text>
            </view>
             <view class="contract-list-i-item">
               <text style="white-space:nowrap;margin-right:26rpx;">店铺名称</text>
               <text>{{item._raw.shopName}}</text>
             </view>
            <view class="button">
              <view class="b-item">去签署</view>
            </view>
          </view>
        </template>
      </list-page>
    </view>
  </view>
</template>

<script>
import listPage from "@/components/list-page";
export default {
  components: {
    listPage,
  },
  onShow() {
    this.$refs.listPage.fresh();
  },
  data() {
    return {
      page: {
        config: {
          entity: "AxqContract",
          action: "contractPage",
          enablePull: true,
        },
        form: {
          query: {
            status: "3",
            type: '1',
          },
        },
      },
    };
  },
  methods: {
  },
};
</script>
<style lang="less">
.contract-list {
  min-height: 100vh;
  background-color: #f7f7f7;

  .contract-list-main {
    height: 100vh;
    .contract-list-item {
      width: 690rpx;
      margin: 30rpx 30rpx 0;
      background: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;

      > view {
        padding: 0 20rpx;
      }

      .item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        font-size: 30rpx;

        .i-sn {
          display: flex;
          align-items: center;
          padding-right: 56rpx;
          font-weight: bold;
          word-break: break-all;
          word-wrap: break-word;
          box-sizing: border-box;

          view {
            flex-shrink: 0;
            width: 6rpx;
            height: 36rpx;
            margin-right: 11rpx;
            background: #db187c;
            border-radius: 3rpx;
          }
        }

        .i-status {
          color: #db187c;
          white-space: nowrap;
        }
      }

      .contract-list-i-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 90rpx;
        font-size: 30rpx;
        color: #333;

        text:first-child {
          color: #666;
        }
      }

      .button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 99rpx;
        border-top: 1rpx solid #f4f4f4;

        .b-item {
          width: 180rpx;
          height: 60rpx;
          margin-left: 15rpx;
          background: #fff;
          border-radius: 30rpx;
          font-size: 30rpx;
          text-align: center;
          line-height: 60rpx;
          box-shadow: 0 0 0 1rpx #db187c;
          color: #db187c;
        }
      }
    }
  }

  .contract-list-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -223rpx;

    text {
      font-size: 30rpx;
      color: #646566;
    }
  }

  .contract-list-application {
    position: fixed;
    bottom: 81rpx;
    left: 50%;
    font-size: 24rpx;
    color: #666;
    transform: translateX(-50%);

    &::after {
      content: "";
      position: absolute;
      top: -96%;
      left: -100%;
      width: 300%;
      height: 300%;
    }
  }

  .contract-list-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    > view {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 500rpx;
      height: 520rpx;
      background: #fff;
      border-radius: 10rpx;
      line-height: 1;

      > image {
        width: 100rpx;
        height: 100rpx;
      }

      > image + view {
        margin: 48rpx 0 29rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      > image + view + view {
        margin-bottom: 110rpx;
        font-size: 24rpx;
        color: #999;
      }

      > view:last-child {
        width: 200rpx;
        height: 60rpx;
        font-size: 30rpx;
        color: #fff;
        background: #db187c;
        border-radius: 30rpx;
        text-align: center;
        line-height: 60rpx;
      }
    }
  }
}
</style>
